// $minWidth:100px;
// $minHeight:300px;
// $mainColor:mediumpurple;
// $borderColor:navajowhite;
// div{
// 	width: $minWidth;
// 	height: $minHeight;
// 	border: solid 10px $borderColor;
// 	background-color: $mainColor;
// 	$content:'我是一名学生' !global;
// 	.title{
// 		content: $content;
// 	}
// }
// p::before{
// 	content: $content;
// }

// $width:100px;
// $height:100px;
// .div_one{
// 	width: $width;
// 	height: $height;
// 	background-color: mediumpurple;
// }
// .div_tow{
// 	@extend .div_one;
// 	background-color: orchid;
// }

// $width:300px;
// $height:300px;
// .div_one{
// 	width: $width;
// 	height: $height;
// 	background-color: magenta;
// 	$val1:($width - 100px) !global;
// 	.inner_box{
// 		width: $val1;
// 		height: $val1;
// 		background-color: peachpuff;
// 		transition: background-color 0.3s;
// 		&:hover{
// 			background-color: orange;
// 		}
// 	}
// 	.title{
// 		$val1:$val1 - 50px;
// 		width: $val1;
// 		margin-top: 30px;
// 		background-color: darkcyan;
// 		color: aliceblue;
// 		font-weight: bold;
// 	}
// }

// $count:10;
// $context:'我是谁';
// $color1:blue;
// $color2:orange;
// .div_one{
// 	height: 100px;
// 	width: 100px;
// 	@if $count != 10{
// 		background-color: $color1;
// 	}@else{
// 		background-color: $color2;
// 	}
// 	@if $context != '我是谁'{
// 		.div_tow{
// 			height: 50px;
// 			width: 50px;
// 			background-color: brown;
// 		}
// 	}@else{
// 		.div_tow{
// 			height: 50px;
// 			width: 50px;
// 			background-color: purple;
// 		}
// 	}
// }

// $val:300px;
// $color1:purple;
// $color2:orange;
// $context:'我是谁';
// .div_one{
// 	width: 500 - 100px;
// 	height: ($val/2);
// 	margin-top: (100px/2);
// 	background-color: $color1;
// 	.div_tow{
// 		width: ($val - $val/2);
// 		height: ($val/4);
// 		background-color: $color2;
// 		&::after{
// 			content: $context+？+哦豁;
// 			color: white;
// 		}
// 	}
// 	&::before{
// 	content: 哦豁+'~'+$context+？;
// 	color: black;
// }


// $val:300px;
// $color1:purple;
// $color2:orange;
// $size:size;
// $one:one;
// $author:'星光';
// /**
//  * 作者#{$author}
//  */
// .div_#{$one}{
// 	width: $val;
// 	height: $val*1.5;
// 	font-#{$size}: 20px;
// 	color: $color2;
// 	background-color: $color1;
// }

// @for $var from 3 to 6{
// 	.p#{$var}{
// 		width: 100px;
// 		height: 100px;
// 	}
// }
// @for $var from 3 through 6{
// 	.p#{$var}{
// 		width: 100px;
// 		height: 100px;
// 	}
// }

// $list: 3 4 5 6;
// @each $var in $list {
// 	$index:index($list, $var);
// 	.p#{$index}{
// 		width: 100px * $var;
// 	}
// }

// $column:12;
// @while $column>0 {
// 	.col-sm-#{$column}{
// 		width: $column / 12 * 100%;
// 	}
// 	$column:$column - 1;
// }

// @import "common.scss"

// @mixin boxMessage($width,$height,$border,$left,$backgroundColor) {
// 	width: $width;
// 	height: $height;
// 	border: $border;
// 	left: $left;
// 	background-color: $backgroundColor;
// }

// .box1{
// 	@include boxMessage(100px, 100px, 1px solid red, 0px, yellow);
// }
// .box2{
// 	@include boxMessage(50px, 50px, 3px solid orange, 100px, purple);
// }

// @mixin triangleMessage($size:20px,$top:0px,$left:0px,$rotate:0deg,$color1:rgba(255,255,255,0),$color2:rgba(255,255,255,0),$color3:red,$color4:red){
// 	$var:0px;
// 	width: $var;
// 	height: $var;
// 	transform: rotate($rotate);
// 	border: $size solid;
// 	border-color: $color1 $color2 $color3 $color4;
// 	margin-top: $top;
// 	margin-left: $left;
// 	float: left;
// }

// .triangle1{
// 	@include triangleMessage($size:20px,$top:200px,$left:50px,$rotate:180deg,$color1:rgba(255,255,255,0),$color2:rgba(255,255,255,0),$color3:blue,$color4:rgba(255,255,255,0));
// }
// .triangle2{
// 	@include triangleMessage($size:50px,$top:150px,$color1:rgba(255,255,255,0),$color2:rgba(255,255,255,0),$color3:red,$color4:rgba(255,255,255,0));
// }
// .triangle3{
// 	@include triangleMessage($size:50px,$top:150px,$rotate:90deg,$color1:rgba(255,255,255,0),$color2:rgba(255,255,255,0),$color3:yellow,$color4:rgba(255,255,255,0));
// }
// .triangle4{
// 	@include triangleMessage($size:80px,$top:90px,$rotate:-90deg,$color3:black);
// }

@mixin triangle($size:50px,$color:transparent,$direction:top){} {
	width: 0px;
	height: 0px;
	display: inline-block;
	border-style: solid;
	border-width: $size;
	@if $direction == 'top'{
		border-color: $color transparent transparent transparent;
	}@else if $direction == 'right'{
		border-color: transparent $color transparent transparent;
	}@else if $direction == 'bottom'{
		border-color: transparent transparent $color transparent;
	}@else if $direction == 'left'{
		border-color: transparent transparent transparent $color;
	}
}
$comfig:(color:red,direction:top);